{% extends "base.html" %}
{% load i18n %}
{% load static %}
{% block content %}
    <div id="content">

    <!-- Begin Page Content -->
    <div class="container-fluid">

        <!-- Page Heading -->
        <h1 class="h3 mb-2 text-gray-800">认证方式</h1>

        <div class="row">
            <!-- 第二个卡片 -->
            <div class="col-md-4" onclick="click_internal()">
                <div class="card shadow" style="min-height: 150px;background-color: #f8f9fc;">
                    <div class="position-relative">
                        <!-- 单选框 -->
                        <input type="radio" name="options" checked id="internal" value="Option 1" class="form-check-input position-absolute" style="top: 20px; right: 20px;">
                        <!-- 卡片内容 -->
                        <div class="card-body d-flex align-items-center">
                            <!-- 左侧图片 -->
                            <img src="{% static 'img/internal.jpeg' %}" alt="Brand Icon" style="width: 320px; height: 120px;">
                        </div>
                    </div>
                </div>
            </div>

            <!-- 第一个卡片 -->
            <div class="col-md-4" onclick="click_ldap()">
                <div class="card shadow" style="min-height: 150px;background-color: #f8f9fc;">
                    <div class="position-relative">
                        <!-- 单选框 -->
                        <input type="radio" name="options" id="ldap" value="Option 1" class="form-check-input position-absolute" style="top: 20px; right: 20px;">
                        <!-- 卡片内容 -->
                        <div class="card-body d-flex align-items-center">
                            <!-- 左侧图片 -->
                            <img src="{% static 'img/ldap.jpeg' %}" alt="Brand Icon" style="width: 330px; height: 120px;">
                        </div>
                    </div>
                </div>
            </div>

            <!-- 第三个卡片 -->
            <div class="col-md-4" onclick="click_oauth()">
                <div class="card shadow" style="min-height: 150px;background-color: #f8f9fc;">
                    <div class="position-relative">
                        <!-- 单选框 -->
                        <input type="radio" name="options" id="oauth" value="Option 1" class="form-check-input position-absolute" style="top: 20px; right: 20px;">
                        <!-- 卡片内容 -->
                        <div class="card-body d-flex align-items-center">
                            <!-- 左侧图片 -->
                            <img src="{% static 'img/oauth.jpeg' %}" alt="Brand Icon" style="width: 330px; height: 120px;">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <br>
        <hr>

        <form class="mt-3">
            <div style="display: none" id="oauth_setup">
                <div class="row mb-3">
                    <!-- Label 和 输入框在一行 -->
                    <label for="clientID" class="col-sm-1 col-form-label"><span class="text-danger">*</span> Client ID</label>
                    <div class="col-sm-6">
                        <input type="text" id="clientID" class="form-control" placeholder="请输入内容">
                    </div>
                </div>
                <div class="row mb-3">
                    <!-- Label 和 输入框在一行 -->
                    <label for="clientSecret" class="col-sm-1 col-form-label"><span class="text-danger">*</span> Client Secret</label>
                    <div class="col-sm-6">
                        <input type="text" id="clientSecret" class="form-control" placeholder="请输入内容">
                    </div>
                </div>
                <div class="row mb-3">
                    <!-- Label 和 输入框在一行 -->
                    <label for="redirectURL" class="col-sm-1 col-form-label"><span class="text-danger">*</span> Redirect URL</label>
                    <div class="col-sm-6">
                        <input type="text" id="redirectURL" class="form-control" placeholder="请输入内容">
                    </div>
                </div>
                <div class="row mb-3">
                    <!-- Label 和 输入框在一行 -->
                    <label for="authorizationURL" class="col-sm-1 col-form-label"><span class="text-danger">*</span> Authorization URL</label>
                    <div class="col-sm-6">
                        <input type="text" id="authorizationURL" class="form-control" placeholder="请输入内容">
                    </div>
                </div>
                <div class="row mb-3">
                    <!-- Label 和 输入框在一行 -->
                    <label for="accessTokenURL" class="col-sm-1 col-form-label"><span class="text-danger">*</span> Access token URL</label>
                    <div class="col-sm-6">
                        <input type="text" id="accessTokenURL" class="form-control" placeholder="请输入内容">
                    </div>
                </div>
                <div class="row mb-3">
                    <!-- Label 和 输入框在一行 -->
                    <label for="resourceURL" class="col-sm-1 col-form-label"><span class="text-danger">*</span> Resource URL</label>
                    <div class="col-sm-6">
                        <input type="text" id="resourceURL" class="form-control" placeholder="请输入内容">
                    </div>
                </div>
                <div class="row mb-3">
                    <!-- Label 和 输入框在一行 -->
                    <label for="resourceURL" class="col-sm-1 col-form-label"> Grant Type</label>
                    <div class="col-sm-6">
                        <input type="text" id="grantType" class="form-control" placeholder="请输入内容">
                    </div>
                </div>
            </div>

            <div style="display: none" id="ldap_setup">
                <div class="row mb-3">
                    <!-- Label 和 输入框在一行 -->
                    <label for="ldap_addr" class="col-sm-1 col-form-label"><span class="text-danger">*</span> LDAP Server</label>
                    <div class="col-sm-6">
                        <input type="text" id="ldap_addr" class="form-control" placeholder="请输入内容, 例: ldap://myldap.domain.tld:389">
                    </div>
                </div>
                <div class="row mb-3">
                    <!-- Label 和 输入框在一行 -->
                    <label for="dn_addr" class="col-sm-1 col-form-label"><span class="text-danger">*</span> Reader DN</label>
                    <div class="col-sm-6">
                        <input type="text" id="dn_addr" class="form-control" placeholder="请输入内容, 例: ou=users,dc=domain,dc=tld">
                    </div>
                </div>
                <hr>
                <label for="clientSecret" class="col-sm-0 col-form-label" style="font-weight: bold;">Test Login</label>
                <br><br>
                <div class="row mb-3">
                    <!-- Label 和 输入框在一行 -->
                    <label for="ldap_user" class="col-sm-0.3 col-form-label">&nbsp;&nbsp;&nbsp;用户名:&nbsp;&nbsp;&nbsp;&nbsp;</label>
                    <div class="col-sm-1.5">
                        <input type="text" id="ldap_user" class="form-control" placeholder="请输入用户名">
                    </div>
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <label for="ldap_passwd" class="col-sm-0.3 col-form-label"><span class="text-danger">&nbsp;</span> 密码:&nbsp;&nbsp;&nbsp;&nbsp;</label>
                    <div class="col-sm-1.5">
                        <input type="text" id="ldap_passwd" class="form-control" placeholder="请输入密码">
                    </div>
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <button type="button" class="btn btn-info" onclick="test_ldap()">测试</button>
                </div>

            </div>

            <!-- 密码长度拖拽条 -->
            <div id="passwd_range">
                 <label for="lengthSlider" class="form-label col-sm-0"><span class="text-danger">*</span> 设置密码长度: </label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <br>
                &nbsp;1. 密码长度至少8位
                <br>
                &nbsp;2. 密码不能全部是数字，必须包含特殊字符
            </div>

            <br>
            <div>
                <span id="msg" class="text-danger"></span>
            </div>
            <br>
            <!-- 提交按钮 -->
            <div class="d-grid gap-2">
                <button type="button" class="btn btn-primary" onclick="update_authentication()">提交</button>
            </div>
            <br>
        </form>


    </div>
    <!-- /.container-fluid -->
    <div id="load" class="position-fixed w-100 h-100"
     style="top: 0; left: 0; background: rgba(255, 255, 255, 0.2); z-index: 1100; display: none;
            justify-content: center;
            align-items: center;">
        <div class="spinner-border text-success" role="status" style="width: 3rem; height: 3rem; position: absolute; top: 50%; left: 50%; margin-top: -1.5rem; margin-left: -1.5rem;">
        <span class="sr-only">加载中...</span>
    </div>
</div>
 <!-- 引入 Bootstrap 4 和 jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
{% endblock content %}
{% block js %}
    <script type="text/javascript">
        // 设置加载图片
        function loading() {
            document.getElementById('load').style.display = 'flex';
        };

        // 移除加载图片
        function loading_remove() {
            document.getElementById('load').style.display = 'none';
        };

        // 点击卡片也可选择认证方式
        function click_internal() {
            const internal = document.getElementById("internal");
            const passwd_range = document.getElementById("passwd_range");
            const oauth_setup = document.getElementById("oauth_setup");
            internal.checked = true;
            passwd_range.style.display = "block";
            oauth_setup.style.display = "none";
            ldap_setup.style.display = "none";
        }

        // 点击卡片也可选择认证方式
        function click_oauth() {
            const oauth_setup = document.getElementById("oauth_setup");
            const passwd_range = document.getElementById("passwd_range");
            const oauth = document.getElementById("oauth");
            oauth.checked = true;
            oauth_setup.style.display = "block";
            passwd_range.style.display = "none";
            ldap_setup.style.display = "none";
        }

        // 点击卡片也可选择认证方式
        function click_ldap() {
            const oauth_setup = document.getElementById("oauth_setup");
            const ldap = document.getElementById("ldap");
            const passwd_range = document.getElementById("passwd_range");
            ldap.checked = true;
            oauth_setup.style.display = "none";
            passwd_range.style.display = "none";
            ldap_setup.style.display = "block";

        }

        // 移除reminder
        function reminder_remove() {
            var reminder_msg = document.getElementById("msg");
            reminder_msg.innerHTML = '';
        };

        // 加载页面时显示正确的认证方式
        window.addEventListener('load', function () {
            reminder_remove()

            $.ajax({
                type: "get",
                url: "/update_authn/",
                dataType: "json",
                data: {

                },
                complete: function () {
                },
                success: function (data) {
                    if (data.authenticate_tag === 0) {
                        const internal = document.getElementById("internal");
                        const passwd_range = document.getElementById("passwd_range");
                        const oauth_setup = document.getElementById("oauth_setup");
                        internal.checked = true;
                        passwd_range.style.display = "block";
                        oauth_setup.style.display = "none";
                        ldap_setup.style.display = "none";
                    } else if (data.authenticate_tag === 1) {
                        const internal = document.getElementById("internal");
                        const ldap = document.getElementById("ldap");
                        const oauth = document.getElementById("oauth");
                        ldap.checked = true;
                        oauth_setup.style.display = "none";
                        passwd_range.style.display = "none";
                        ldap_setup.style.display = "block";
                        document.querySelector('#ldap_addr').value=data.authorization_url;
                        document.querySelector('#dn_addr').value=data.resource_url;
                    } else if (data.authenticate_tag === 2) {
                        const oauth_setup = document.getElementById("oauth_setup");
                        const passwd_range = document.getElementById("passwd_range");
                        const oauth = document.getElementById("oauth");
                        oauth.checked = true;
                        oauth_setup.style.display = "block";
                        passwd_range.style.display = "none";
                        ldap_setup.style.display = "none";
                        document.querySelector('#clientID').value=data.client_id;
                        document.querySelector('#clientSecret').value=data.client_secret;
                        document.querySelector('#redirectURL').value=data.redirect_url;
                        document.querySelector('#authorizationURL').value=data.authorization_url;
                        document.querySelector('#accessTokenURL').value=data.access_token_url;
                        document.querySelector('#resourceURL').value=data.resource_url;
                        document.querySelector('#grantType').value=data.grant_type;
                    }
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {

                }
            });
        });

        // 认证方式信息更新
        function update_authentication() {
            var reminder_msg = document.getElementById("msg");

            $.ajax({
                type: "post",
                url: "/update_authn/",
                dataType: "json",
                data: {
                    internal: document.getElementById("internal").checked,
                    ldap: document.getElementById("ldap").checked,
                    oauth: document.getElementById("oauth").checked,
                    client_id: $("#clientID").val(),
                    client_secret: $("#clientSecret").val(),
                    redirect_url: $("#redirectURL").val(),
                    authorization_url: $("#authorizationURL").val(),
                    access_token_url: $("#accessTokenURL").val(),
                    resource_url: $("#resourceURL").val(),
                    grant_type: $("#grantType").val(),
                    ldap_addr: $("#ldap_addr").val(),
                    dn_addr: $("#dn_addr").val(),
                },
                complete: function () {
                },
                success: function (data) {
                    if (data.status === 0) {
                        location.reload();
                    } else {
                        reminder_msg.innerHTML = 'Reminder: ' + data.msg;
                    }
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    reminder_msg.innerHTML = 'Reminder: ' + errorThrown;
                }
            });
        }

        // ldap认证测试
        function test_ldap() {
            loading()
            var reminder_msg = document.getElementById("msg");
            $.ajax({
                type: "post",
                url: "/check_ldap/",
                dataType: "json",
                data: {
                    ldap_addr: $("#ldap_addr").val(),
                    dn_addr: $("#dn_addr").val(),
                    ldap_user: $("#ldap_user").val(),
                    ldap_passwd: $("#ldap_passwd").val(),
                },
                complete: function () {
                    loading_remove()
                },
                success: function (data) {
                    loading_remove()
                    reminder_msg.innerHTML = 'Reminder: ' + data.msg;
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    reminder_msg.innerHTML = 'Reminder: ' + errorThrown;
                    loading_remove();
                }
            });
        }

    </script>
{% endblock %}